<template>
	<view>
  <view class="f-tab">
				<view class="item" v-for="(item,index) in typeList" :class="{on:tabType===item.type}" @click="changeTab(item)" :key="index">
           {{item.text}}
            <view class="tb-line" />
         </view>
			</view>
    <view class="content">
      <view class="noData" v-if="listData.length==0"> 
      <image class="img" src="/static/user/coupon.png" />
      <view class="text">啊哦，没有优惠券</view>
	  </view>
      <view class="coupon-list">
          <view class="item" v-for="(item,index) in listData" :key="index">
               <view class="prv-box">
                    <image class="nimg" src="/static/logo.png" />
                    <view class="title">祖国万岁</view>
                    <view class="time">2012-03-03 至 2012-03-20 </view>
               </view>
               <view class="next-box">
                   <text class="text">使用说明 <iconArrow /> </text>
                    <view class="btn" v-if="item.type===1">立即使用</view>
                    <view class="nobtn" v-if="item.type===2">已使用</view>
                    <view class="nobtn" v-if="item.type===3">已过期</view>
               </view>
               <view class="explain">1.在线购买UME电影票支付时出示此券。</view>
          </view>
      </view>
     </view>
	</view>
</template>
<script>
  import iconArrow from '../components/icon-arrow';
	export default {
	components: {
		iconArrow
  },
		data() {
			return {
        tabType:1,
        typeList:[
          {type:1, text:'可使用' }, { type:2, text:'已使用' },{ type:3, text:'已过期'}
        ],
        CopyData:[
          {type:1},{type:1},{type:2},{type:2},{type:3},{type:3}
        ],
        listData:[]
			}
		},
		onLoad() {
      let self = this;
       self.listData = self.CopyData.filter(function(item){
         return item.type === self.tabType;
       });
		},
		methods: {
			 btnHome(item){
			  	this.$api.goPage('/pages/index/index');
      },
      changeTab(item){
        let self = this;
        this.tabType = item.type;
         self.listData = self.CopyData.filter(function(item){
         return item.type === self.tabType;
       });
      }
		}
	}
</script>

<style  lang="scss" scoped>
 .content{
  background-color: #f5f5f5;
  height: 85vh;
  overflow-y: scroll;
 }
	.f-tab{
	  	display: flex;
			width: px2vw(375);
			position: relative;
      margin: 0 auto px2vw(6) auto;
      background-color: #fff;
      padding:px2vw(5) 0;
      .f-btn{
        font-size: px2vw($fz14);
        height:  px2vw(30);
			  line-height:  px2vw(30);
        margin-left: px2vw(10); 
        margin-right: px2vw(35);
        .arrow{
          margin-left: px2vw(5); 
        }
      }
		.item{
			padding:  px2vw(10) 0;
			font-size: px2vw($fz14);
			font-weight: 600;
			color: #000;
      width: 33.3%;
      text-align: center;
      position: relative;
      .tb-line{
        background-color: #F24244;
        height: px2vw(3);
        width: px2vw(20);
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: - px2vw(10);
        border-radius: px2vw(5);
        display: none;
      }
		}
		.on{
			color: #F24244;
      .tb-line{
        display: block;
      }
		}
		.c-line-item{
			padding: 0 px2vw(10);
			border-right: px2vw(0.5) solid #ddd;
			height:  px2vw(60);
		}
  }
  .coupon-list{
    position: relative;
    padding: px2vw(10) 0;
    .item{
        width:  px2vw(345);
        margin: px2vw(10) auto;
        border: px2vw(1) solid #CCC4B8;
        position: relative;
        background-color: #fff;
        overflow: hidden;
        border-radius: px2vw(5);
        .prv-box{
          height: px2vw(90);
          position: relative;
          background-color: #fff;
          .nimg{
              height: px2vw(50);
              width: px2vw(50);
              border-radius: px2vw(50);
              border:px2vw(1) solid #ddd;
              position: absolute;
              top: 50%;
              margin-top: - px2vw(25);
              left: px2vw(20);
          }
          .time,
          .title{
            padding-top: px2vw(25);
            padding-left: px2vw(80);
            color: #000;
            font-size:  px2vw($fz16);
            font-weight: 600;
          }
          .time{
              padding-top: px2vw(5);
              font-size:  px2vw($fz12);
              color: #888;
              font-weight: normal;
          }
        }
        .next-box{
          background-color: #F5ECDE;
          position: relative;
          padding: px2vw(15) 0;
          .text{
            position: relative;
            font-size: px2vw($fz14);
            padding-left: px2vw(20);
            padding-right: px2vw(25);
          }
          .nobtn,
          .btn{
            height: px2vw(35);
            line-height: px2vw(35);
            width:px2vw(90);
            text-align: center;
            font-size: px2vw($fz14);
            color: #000;
            border:px2vw(1) solid #ddd;
            border-radius: px2vw(5);
            position: absolute;
            top:50%;
            margin-top:- px2vw(17.5);
            right: px2vw(10);
            background-color: #fff;
          }
          .nobtn{
            border: none;
            color: #888;
            background-color: transparent;
            text-align: right;
          }
        }

        .explain{
         background-color: #CCC4B8;
         font-size: px2vw($fz14);
         padding: px2vw(10) px2vw(20);
         color: #fff;
        }
    }
  }
.noData{
    padding:px2vw(100) 0;
    text-align: center;
    .img{
      height: px2vw(73);
      width:  px2vw(73);
    }
    .text{
      text-align: center;
      font-size:px2vw($fz14);
      color: #888; 
      padding-top: px2vw(5);
    }
  }
</style>
